<template>
  <template v-for="item in menus" :key="item.path">
    <el-sub-menu
      v-if="item.children && item.children.length > 0"
      :index="item.path"
    >
    <template #title>
      <el-icon v-if="item.icon">
        <component :is="item.icon"></component>
      </el-icon>
      <span>{{ getMenusTitle(item.name) }}</span>
    </template>
    <app-menu-item :menus="item.children"/>
    </el-sub-menu>
    <el-menu-item
      v-else
      :index="item.path"
    >
      <el-icon v-if="item.icon">
        <component :is="item.icon"></component>
      </el-icon>
      <template #title>
        <span>{{ getMenusTitle(item.name) }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script name="AppMenuItem" setup>
import { useI18n } from '@hooks/useI18n'
const { t } = useI18n("menu")
const props = defineProps({
  menus: {
    required: true,
    type: Array
  }
})
const getMenusTitle = (name) => {
  return t(name)
}
</script>

<style lang="scss" scoped>

</style>